<template>
  <!--搜索白名单区域-->
  <div class="certificate">
    <!-- 查询结果 -->
    <div class="serresult">
      <div class="result">查询结果：职场征信等级—<span>优秀</span></div>
    </div>
    <!-- 输入证书信息 -->
    <div class="zsinfo">
      <h5>请输入证书信息</h5>
      <!-- 头像 -->
      <div class="touxiang">
        <form>
          <!-- 姓名 -->
          <div class="padd-right">
            <label class="padd-left">头像</label>
            <span class="name">
              <img src="static/icon_pc/icon/icon_add_big.png" alt="" v-show="!defaultInfo.head_img">
              <input type="file" @change="choiceImg" accept="image/*"/>
              <img :src="defaultInfo.head_img" style="border-radius: 50%;"
                   v-show="defaultInfo.head_img">
            </span>
          </div>
          <!-- 姓名 -->
          <div class="padd-name">
            <label class="padd-left">姓名</label>
            <span class="namexm">
                            <input type="text" v-model="defaultInfo.name" placeholder="请输入姓名">
                        </span>
          </div>
        </form>
        <span class="countinfo" @click="setDefaultInfo()">默认使用账户头像和昵称</span>
      </div>
    </div>
    <!-- 生成征信证书 -->
    <div class="button">
      <button class="btn" @click="generateCreditCertificate()">生成征信证书</button>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        defaultInfo: {
          head_img: '',
          name: '',
        }
      }
    },
    props: {
      whitelistInfo: {}
    },
    created() {

    },
    methods: {
      generateCreditCertificate() {      //生成征信证书
        if (!this.defaultInfo.head_img || !this.defaultInfo.name) {
          this.$toast({
            message: "头像或姓名不能为空",
            duration: 1500
          });
        } else {
          // console.log(this.defaultInfo.head_img);
          this.$emit('showCreditCertificate', {name: this.defaultInfo.name, head_img: this.defaultInfo.head_img});
        }
      },
      choiceImg(file) {  //选择头像
        console.log('file+++++++', file.target.files[0].size);
        let fileSize = file.target.files[0].size;
        if (fileSize < 2048000) {
          if (file.target.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(file.target.files[0]);
            reader.onload = e => {
              this.defaultInfo.head_img = reader.result;
            };
          }
        } else {
          this.$toast("图片不能大于2MB");
        }
      },
      setDefaultInfo() {   //使用默认用户信息
        let info = JSON.parse(JSON.stringify(this.whitelistInfo));
        // alert(this.defaultInfo.head_img);
        this.setImgToBase64(info.head_img, info);
        this.loadNotify = this.$toast.loading({
          mask: true,
          message: '加载中...',
          duration: 0,
        });
      },
      getBase64Image(img) {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        let dataUrl = canvas.toDataURL("image/png");
        return dataUrl;
      },
      setImgToBase64(src, info) {
        let image = new Image();
        image.src = src + "?v=" + Math.random(); // 处理缓存
        // image.src = src;
        image.crossOrigin = "*"; // 支持跨域图片
        image.onload = () => {
          let base64 = this.getBase64Image(image);
          // alert('默认头像转换好了'+base64);
          this.defaultInfo = info;
          this.defaultInfo.head_img = base64;
          this.loadNotify.clear();
          // cb && cb(base64);
        };
      },

    }
  }
</script>

<style scoped>
  /* 头部 */

  .searchlist .my_header {
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    /* text-align: center; */
    line-height: 0.88rem;
    color: #fff;
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
    padding: 0 0.2rem;
    color: #ffffff;
  }

  .searchlist .my_header .cancel {
    color: #ffffff;
  }

  .searchlist .my_header i {
    font-size: 0.4rem;
    float: left;
    line-height: 0.88rem;
  }

  .searchlist .top1 {
    height: 0.88rem;
    line-height: 0.88rem;
  }

  .searchlist .goback {
    float: left;
  }

  .searchlist .my_input {
    width: 80%;
    float: left;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    background-color: rgba(0, 133, 240, 1);
    position: relative;
  }

  .searchlist .my_input input {
    height: 0.52rem;
    color: #333;
    font-size: 0.24rem;
    margin-bottom: 0;
  }

  .searchlist input[type="text"] {
    padding-top: 0.2rem;
    padding-left: 0.5rem;
  }

  .searchlist .my_img {
    width: 0.24rem;
    height: 0.24rem;
    position: absolute;
    left: 0.2rem;
    top: 0.34rem;
  }

  .searchlist .headcircle {
    width: 1.2rem;
    height: 1.2rem;
    text-align: center;
    margin: 0px auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    /* Firefox */
    -webkit-border-radius: 50%;
    /* Safari 和 Chrome http://www.manongjc.com/article/1214.html */
  }

  @media screen and (width: 320px) {
    .certificate .name > input {
      top: 30%;
    }
  }

  .searchlist .isdisplay {
    display: block !important;
  }

  .searchlist #ser {
    font-size: 0.28rem;
    position: absolute;
    left: 15%;
    color: #ccc;
  }

  .cancel {
    font-size: 0.28rem;
    font-weight: 500;
    color: #fff;
    float: right;
    padding-right: 0.1rem;
  }

  .searchlist {
    background-color: #fff;
  }

  /* 总计 */

  .havedata {
    display: none;
  }

  .total {
    height: 0.88rem;
    margin-top: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    border-bottom: 0.01rem solid #ccc;
  }

  .havedata .total .tol {
    float: left;
  }

  .havedata .all {
    font-size: 0.28rem;
    color: #999;
  }

  .havedata .all .peo {
    color: #333;
  }

  .havedata .total .area {
    float: right;
  }

  .havedata .area span {
    font-size: 0.28rem;
    color: #0085f0;
  }

  /* 员工信息 */

  .havedata .info {
    margin-top: 0.3rem;
  }

  .havedata .infor {
    width: 92%;
    height: 1.7rem;
    background-color: #fff;
    border: 0.01rem solid #ccc;
    margin: 0 auto;
    padding: 0.2rem;
    position: relative;
    border-bottom: 1px solid #ccc !important;
  }

  .havedata .infor:nth-child(2) {
    border-top: 0;
    border-bottom: 0;
  }

  .havedata .infor div {
    height: 0.45rem;
    font-size: 0.26rem;
    color: #999;
  }

  .havedata .infor .xinxi {
    color: #333;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 180px;
  }

  /* 查看详情 */

  .havedata .detail {
    display: inline-block;
    width: 0.64rem;
    height: 1.7rem;
    position: absolute;
    right: 0;
    top: 0;
  }

  .havedata .detail .cont {
    width: 0.26rem;
    height: 1.7rem;
    line-height: 15px;
    font-size: 0.26rem;
    color: #0085f0;
    padding: 0.25rem 0.15rem;
    border-left: 0.001rem solid #ccc;
  }

  /* 员工信息2 */

  .havedata .info2 {
    margin: 0.3rem 0;
  }

  .havedata .info2 .inform {
    border-bottom: 0.01rem solid #ccc;
  }

  /*黑名单样式*/

  .certificate {
    background-color: #f8f8f8;
    /*display: none;*/
  }

  /* 总计 */

  .certificate .area span {
    font-size: 0.28rem;
    color: #0085f0;
  }

  /* 查询结果 */

  .certificate .serresult {
    height: 0.88rem;
    margin-top: 0.2rem;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    background-color: #fff;
  }

  .certificate .result {
    /* margin-top: .88rem; */
    font-size: 0.28rem;
    color: #0085f0;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
  }

  .result span {
    font-size: 0.34rem;
    color: #f40a0a;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
  }

  /* 输入证书信息 */

  .certificate .zsinfo {
    position: relative;
  }

  .certificate .zsinfo h5 {
    color: #999;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    padding: 0 0.3rem;
    margin: 0;
    padding-top: 0.41rem;
    margin-bottom: 0.24rem;
  }

  /* 头像 */

  .certificate .touxiang {
    height: 1.4rem;
    border-bottom: 0.001rem solid #ccc;
    background-color: #fff;
  }

  .certificate .padd-right {
    padding-right: 0.25rem;
    line-height: 1.4rem;
    background-color: #fff;
    overflow: hidden;
  }

  .certificate .namexm input {
    width: 50%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: right;
    position: absolute;
    right: 0.2rem;
    border: none;
  }

  .certificate .padd-name {
    height: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
  }

  .certificate .padd-left {
    font-size: 0.3rem;
    color: #333;
    font-weight: 500;
    padding-left: 0.3rem;
  }

  .certificate .name {
    font-size: 0.25rem;
    color: #666;
    float: right;
    width: 16%;
    height: 1.4rem;
  }

  .certificate .name img {
    width: 1rem;
    height: 1rem;
  }

  .certificate .name > input {
    border: none;
    padding-top: 0.3rem;
    text-align: right;
    width: 19%;
    height: 1.5rem;
    position: absolute;
    right: 0.2rem;
    opacity: 0;
  }

  /* 默认使用账户信息 */

  .certificate .countinfo {
    font-size: 0.26rem;
    color: #0085f0;
    padding-right: 0.27rem;
    bottom: -65%;
    right: 0;
    position: absolute;
  }

  /* 生成征信证书 */

  .certificate .button {
    text-align: center;
    margin-top: 25%;
    color: #ffffff;
  }

  .certificate .btn {
    width: 93.33%;
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    border-radius: 0.15rem;
  }

</style>
